<template>
  <el-dialog
    v-model="props.dialogVisible"
    title="确认删除"
    width="30%"
    @close="cancel"
  >
    <span>是否要删除此项？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="sure"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const props = defineProps({
  dialogVisible:{
    type: Boolean,
    default:false 
  },
  id:{
    type:[Number,String],
    default:0 

  }
})
const emit = defineEmits(["sure","cancel"]);
//确定删除
const sure = () => { 
    emit("sure",props.id);
}
//取消删除
const cancel = () => { 
    emit("cancel",props.id);
}
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
